
<template>
  <el-menu model="horizontal" >

  <el-row :gutter="1">
      <!-- 头部 -->
      <el-col :span="4" >
        <div class="grid-content grid-header" >
            <el-icon size="20"><ElementPlus /></el-icon>
            <span>测试管理</span>
          </div>
        
      </el-col>

      <!-- banner -->
      <el-col :span="8" >
        <div class="grid-content grid-banner">
          
        </div>
      </el-col>

      <!-- 菜单 -->
      <el-col :span="8">
        <div class="grid-content grid-menu">
          <at-menu :itemList="itemList" />
        </div>
      </el-col>
      
      <!-- 登录模块 -->
      <el-col :span="4">
        <div class="grid-content grid-login">
          
        </div>
      </el-col>
  </el-row>

  </el-menu>
</template>

<script setup>
import atMenu from '@/components/common/atMenu/index.vue'
import { getMenus } from '@/api'
import { ref, onMounted } from 'vue'
const itemList = ref(null)


onMounted(async () => {
  itemList.value = (await getMenus()).data
})

</script>

<style scoped>
.el-row {
    position:fixed;
    width: 100%;
    left: 0px;
    right: 0px;
    height: 59px;
    margin: 0;
    
}
.el-col {
  box-shadow: 0 0.1px 3px rgba(249, 249, 249, 0.9);
  /* border: 1px solid gray; */
  background-color: #376cc7;
  align-items: center;
  justify-content: center;
}

.grid-content {
  color: aliceblue;
}

.grid-header .el-icon,
.grid-header span{
  margin: 15px 0px;
  color: #fff;
  font-size: 20px;
}

.grid-menu {
  position: fixed;
  width: 50%;
  top: 0;
  right: 0;
}
</style>
